<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="30vw"
    :close-on-click-modal="false"
    :before-close="closeFormModal"
    draggable
  >
    <el-form ref="refForm" label-width="100px" :inline="false" :model="subForm" :rules="formRules" class="pr-5">
      <el-form-item label="父级菜单" prop="pid" label-position="left">
        <el-cascader
          ref="refCascader" v-model="subForm.pid" :options="menuTreeData"
          :props="{ value: 'id', label: 'title', checkStrictly: true, }" clearable placeholder="无"
          @change="cascaderHandleChange" />
      </el-form-item>
      <el-form-item label="类型" prop="type" :rules="formRules.isNotNull('请选择类型')" label-position="left">
        <el-select v-model="subForm.type" placeholder="请选择">
          <el-option label="菜单" :value="1" />
          <el-option label="页面" :value="2" />
          <el-option label="按键" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="名称" prop="title" :rules="formRules.isNotNull('请填写名称')" label-position="left">
        <el-input v-model="subForm.title" maxlength="20" placeholder="名称" />
      </el-form-item>
      <el-form-item label="KEY" prop="code" :rules="formRules.isNotNull('请填写KEY')" label-position="left">
        <el-input v-model="subForm.code" maxlength="20" placeholder="key" />
      </el-form-item>
      <el-form-item v-if="subForm.type !== 3" label="路径" prop="path" :rules="formRules.isNotNull('请填写路径')" label-position="left">
        <el-input v-model="subForm.path" placeholder="路径">
          <template v-if="subForm.prePath" #prepend>{{ subForm.prePath }}</template>
        </el-input>
      </el-form-item>
      <el-form-item v-if="subForm.type !== 3" label="图标" prop="icon" label-position="left">
        <el-input v-model="subForm.icon" placeholder="图标">
          <template #prepend>
            <el-select v-model="subForm.iconType" placeholder="Select" style="width: 80px">
              <el-option label="ElSvg" :value="1" />
              <el-option label="svg" :value="2" />
            </el-select>
          </template>
        </el-input>
        <el-link
          v-if="subForm.iconType === 1" class="mt-1" type="danger"
          href="https://element-plus.gitee.io/zh-CN/component/icon.html#%E5%9B%BE%E6%A0%87%E9%9B%86%E5%90%88"
          target="_blank">icon图标参照
        </el-link>
      </el-form-item>
      <el-form-item label="显示" prop="hidden" label-position="left">
        <el-radio-group v-model="subForm.hidden">
          <el-radio :label="0" border>显示</el-radio>
          <el-radio :label="1" border>隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序" prop="order" label-position="left">
        <el-input v-model="subForm.order" type="number" class="widthPx-150" placeholder="排序" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeFormModal">取 消</el-button>
        <el-button type="primary" @click="confirmBtnClick">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {reactive, ref, watch} from 'vue'
import { addMenuReq, editMenuReq } from "@/api/setting";
import {elMessage, useElement} from "@/hooks/use-element"

const emit = defineEmits(["formSub", "hideComp"]);
const {formRules, dialogTitle, dialogVisible} = useElement()

const refCascader = ref();
const props = defineProps({
  menus: {
    require: true,
    default: () => {
      return [];
    },
    type: Array
  }
});

const menuTreeData = ref<any[]>([]);
watch(
    () => props.menus,
    (nv) => {
      menuTreeData.value = dealMenus(JSON.parse(JSON.stringify(nv)));
      },
    { immediate: true }
)

function dealMenus(menus) {
  const tmp: any[] = [];
  for (const menu of menus) {
    if (menu.type === 1) {
      if (Object.prototype.hasOwnProperty.call(menu, "children") && menu.children) {
        menu.children = dealMenus(menu.children);
      }
      tmp.push(menu);
    }
  }
  return tmp;
}

const cascaderHandleChange = (value) => {
  if (value) {
    const node = refCascader.value.getCheckedNodes()[0];
    subForm.prePath = node.data.prePath + node.data.path;
  } else {
    subForm.prePath = "";
  }
}
// form ---
let subForm = reactive({
  pid: '',
  title: "",
  code: "",
  type: undefined,
  icon: "",
  iconType: 1,
  path: "",
  prePath: "",
  order: 0,
  hidden: 0
});
const menuId = ref(0);
const refForm = ref();
const showModal = (id, detailData) => {
  if (id) {
    dialogTitle.value = `编辑【${detailData.title}】`;
    reshowData(detailData);
    menuId.value = id;
  } else {
    dialogTitle.value = "添加菜单";
  }
  dialogVisible.value = true;
};

const reshowData = (row) => {
  Object.keys(row).forEach((fItem) => {
    Object.keys(subForm).forEach((sItem) => {
      if (fItem === sItem) {
        subForm[sItem] = row[sItem];
      }
    });
  });
};

const confirmBtnClick = () => {
  const data = JSON.parse(JSON.stringify(subForm));
  if (subForm.pid) {
    if (Array.isArray(subForm.pid)) {
      data.pid = subForm.pid[subForm.pid.length - 1];
    }
  } else {
    data.pid = 0;
  }
  refForm.value.validate((valid) => {
    if (valid) {
      if (menuId.value) {
        editMenuReq(menuId.value, data).then(_ => {
          elMessage("编辑成功");
          emit("formSub");
          emit("hideComp");
        });
      } else {
        addMenuReq(data).then(_ => {
          elMessage("添加成功");
          emit("formSub");
          emit("hideComp");
        });
      }
    }
    return valid;
  });
};

//关闭弹框
const closeFormModal = () => {
  emit("hideComp");
};

defineExpose({
  showModal
});
</script>

<style lang="scss" scoped>

</style>
